<template>
  <div v-show="showModal" class="my-modal">
    <div class="bg-masker" @click="closeModal" data-type='cancel'></div>
    <div class="my-content c-ph24" :class="!recommendList.length ? 'no-data':''">
      <!-- <div @click="closeModal" class="c-pa c-p-t0 c-p-r0 c-ww60 c-hh60 c-flex-row c-flex-center">
        <i class="iconfont c-fs22 c-fc-gray">&#xe61b;</i>
      </div> -->
      <header class="c-pv32 c-fs28 c-fw-b c-textAlign-c">讲师推荐</header>
      <section v-show="recommendList.length > 0" class="c-contexty-scroll c-hh660 c-pb30">
        <div class="c-pv24 c-ph24 c-flex-row c-bg-white c-mb20 c-br8" v-for="(item,index) in recommendList" :key="index" @click="goDetail(item)">
          <!-- 测评 -->
          <div v-if="item.subProdType == 11" class="c-ww180 c-hh120 c-flex-row c-flex-center c-bd1 c-text-hidden c-br10 c-p">
            <img :src="$addXossFilter(item.imgUrl, require('@/assets/examination_defult.png'))" class="c-h" alt="">
            <div class="c-br-tl10 c-br-br10 c-pa c-p-t0 c-p-l0 c-flex-row c-flex-center c-translucent-balck60 c-fc-white c-fs16 c-ph8 c-hh24">{{mapType[item.subProdType]}}</div>
          </div>
          <!-- 活动 -->
          <div v-else-if="item.subProdType == 7 ||item.subProdType == 36" class="c-ww180 c-hh120 c-flex-row c-flex-center c-bd1 c-text-hidden c-br10 c-p">
            <img :src="$addXossFilter(item.imgUrl, require('@/assets/activity_defult.png'))" class="c-w100" alt="">
            <div class="c-br-tl10 c-br-br10 c-pa c-p-t0 c-p-l0 c-flex-row c-flex-center c-translucent-balck60 c-fc-white c-fs16 c-ph8 c-hh24">{{mapType[item.subProdType]}}</div>
          </div>
          <!-- 表单 -->
          <div v-else-if="item.subProdType == 76" class="c-ww180 c-hh120 c-flex-row c-flex-center c-bd1 c-text-hidden c-br10 c-p">
            <img :src="$addXossFilter(item.imgUrl, require('@/assets/form_defult.png'))" class="c-w100" alt="">
            <div class="c-br-tl10 c-br-br10 c-pa c-p-t0 c-p-l0 c-flex-row c-flex-center c-translucent-balck60 c-fc-white c-fs16 c-ph8 c-hh24">{{mapType[item.subProdType]}}</div>
          </div>
          <!-- 资料 -->
          <div v-else-if="item.subProdType == 8" class="c-ww180 c-hh120 c-flex-row c-flex-center c-bd1 c-text-hidden c-br10 c-p">
            <img :src="$addXossFilter(item.imgUrl, require('@/assets/datum_defult.png'))" class="c-w100" alt="">
            <div class="c-br-tl10 c-br-br10 c-pa c-p-t0 c-p-l0 c-flex-row c-flex-center c-translucent-balck60 c-fc-white c-fs16 c-ph8 c-hh24">{{mapType[item.subProdType]}}</div>
          </div>
          <!-- vip -->
          <div v-else-if="item.subProdType == 1 || item.subProdType == 31" class="c-ww180 c-hh120 c-text-hidden c-br10 c-p">
            <vip-custom-img :cover="item.vipInfo.cover" :imgClass="'c-h'" :hasText="false" v-if="item.vipInfo && item.vipInfo.cover" />
            <img v-else :src="require('@/assets/i/wap/course/vip.png')" class="c-w100 c-h" alt="">
            <div class="c-br-tl10 c-br-br10 c-pa c-p-t0 c-p-l0 c-flex-row c-flex-center c-translucent-balck60 c-fc-white c-fs16 c-ph8 c-hh24">{{mapType[item.subProdType]}}</div>
          </div>
          <!-- svip -->
          <div v-else-if="item.subProdType == 23 || item.subProdType == 32" class="c-ww180 c-hh120 c-text-hidden c-br10 c-p">
            <vip-custom-img :cover="item.vipInfo.cover" :imgClass="'c-h'" :hasText="false" v-if="item.vipInfo && item.vipInfo.cover" />
            <img v-else :src="require('@/assets/i/wap/course/svip.png')" class="c-w100 c-h" alt="">
            <div class="c-br-tl10 c-br-br10 c-pa c-p-t0 c-p-l0 c-flex-row c-flex-center c-translucent-balck60 c-fc-white c-fs16 c-ph8 c-hh24">{{mapType[item.subProdType]}}</div>
          </div>
          <!-- 优惠券 -->
          <div v-else-if="item.subProdType == 92" class="c-text-hidden c-p c-flex-row c-flex-grow1">
            <div :class="(item.status>=3||timeChat(item.endTime))?'exchange-couponGray':item.type == 1 ? 'exchange-left' : 'coupon-left'" class="c-ww120 c-hh120 c-flex-shrink0 c-flex-column  c-aligni-center c-justify-center">
              <div v-if="item.type == 1" class="c-fs32 c-fc-white  c-textAlign-c">兑换券</div>
              <div v-else-if="item.type == 4" class="c-fs32 c-fc-white c-textAlign-c">抵价券</div>
              <section v-else>
                <div v-if="item.type == 5" class="c-fs40 c-fc-white c-textAlign-c c-text-ellipsis1">{{item.price * 1}}<span class="c-fs20">折</span></div>
                <div v-else class="c-fs40 c-fc-white c-textAlign-c c-text-ellipsis1"><span class="c-fs20">{{'￥' | iosPriceFilter('Live')}}</span>{{item.price.split('.')[0]}}</div>
                <div class="c-fs20 c-fc-white c-textAlign-c c-text-ellipsis1 c-mt8">{{Number(item.amount) > 0 ? ('满' + item.amount.split('.')[0] + '元可使用') : '无门槛'}}</div>
              </section>
            </div>
            <div class="c-bg-white c-flex-grow1 c-text-hidden c-flex-column c-justify-sb">
              <div class="c-fs24 c-fc-xblack c-text-ellipsis1 c-ph20">{{item.content}}</div>
              <div class="c-flex-column  c-justify-sb c-pl20 c-fs20 c-fc-gray">
                <div v-if="item.validStatus == 1">领券当日起{{item.validPeriod}}天内可用</div>
                <div v-else-if="item.validStatus == 2">领券次日起{{item.validPeriod}}天内可用</div>
                <div v-else class="c-text-ellipsis1">{{item.startTime.replace(/-/g,'.').split(' ')[0]}} - {{item.endTime.replace(/-/g,'.').split(' ')[0]}}</div>
                <div class="c-flex-row c-aligni-end">
                  <div class="c-fs20 c-flex-grow1 c-fc-gray c-text-ellipsis1">
                    {{item | couponApplyText}}</div>
                  <div v-if="!(item.status>=3||timeChat(item.endTime))">
                    <div v-if='item.leftNum<=0' class="c-ph20 c-hh36 c-flex-row c-flex-center c-br20 c-fs20 c-fc-white c-bg-ccc">已秒光</div>
                    <div v-else class="c-ph20 c-hh36 c-flex-row c-flex-center c-br20 c-fs20 c-fc-white c-bg-xblue" @click.stop="getCouponcou(item)">领取</div>
                  </div>
                  <div v-else class="icon iconfont c-fs80 c-fc-sgray c-pa c-p-r0">&#xe850;</div>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="c-ww180 c-hh120 c-text-hidden c-flex-row c-flex-center c-bd1 c-br10 c-p">
            <img :src="$addXossFilter(item.imgUrl, require('@/assets/defult270.png'))" class="c-w100" alt="">
            <div class="c-pa c-p-t0 c-p-l0 c-br-tl10 c-br-br10 c-flex-row c-flex-center c-translucent-balck60 c-fc-white c-fs16 c-ph8 c-hh24">
              {{item.subProdType == 5 ? courseTypeMap[item.voiceStatus]:mapType[item.subProdType]}}</div>
          </div>
          <div v-if="item.subProdType != 92" class="c-pl20 c-fs24 c-hh120 c-flex-grow1 c-w0 c-flex-column c-justify-sb">
            <div :class="item.subProdType == 7 && item.relationType==relationTypeMap.flashSales && item.atName ? 'c-text-ellipsis2':'c-text-ellipsis1'">
              <span class="bg-flashSales"
                v-if="item.relationType==relationTypeMap.flashSales || item.relationType==relationTypeMap.collage">{{item.relationType==relationTypeMap.flashSales?(Number(item.price) == 0 ? '限时免费' : '限时折扣'):'拼团'}}</span>
              {{item.content}}
            </div>
            <div v-if="item.subProdType == 7 && item.relationType==relationTypeMap.flashSales && item.atName" class="c-fs20 c-text-ellipsis1 c-fc-sblack">{{item.atName}}</div>
            <div class="c-flex-row c-aligni-end">
              <span v-if="item.relationId && item.relationType" class="c-fc-xlred c-flex-grow1 c-w0"><span
                class="c-fc-gray c-fs18 text-decoration c-mr8">{{'￥' | iosPriceFilter('Live')}}{{item.subContent?item.subContent:item.prodPrice}}</span><span
                class="c-fc-gray c-fs18 c-mr8">{{item.relationType==relationTypeMap.flashSales?'折后价':item.relationType==relationTypeMap.collage?'团长价':''}}</span><span>{{'￥' | iosPriceFilter('Live')}}{{item.relationType==relationTypeMap.collage?item.playersPrice:item.price}}</span></span>
              <span v-else :class="item.subProdType == 76 ?'vis-hidden-important':''" class="c-fc-xlred c-flex-grow1 c-w0"><span
                v-if="item.payType == 2 || item.payType == 4">{{'￥' | iosPriceFilter('Live')}}</span>{{item.payType == 2 || item.payType == 4 ? item.subContent : item.payType == 3 ? '加密' : (item.payType==5 ? '购买指定课程参与':(item.payType==6 ? '指定人员购买':'免费'))}}</span>

              <div v-if="item.subProdType == 76" class="c-ph20 c-hh36 c-flex-row c-flex-center c-br20 c-fs20 c-fc-white c-bg-xblue" @click.stop="goRecommendDetail(item)">填写</div>
              <div v-else-if="item.subProdType == 86" class="c-ph20 c-hh36 c-flex-row c-flex-center c-br20 c-fs20 c-fc-white c-bg-xblue" @click.stop="goRecommendDetail(item)">预约</div>
              <div v-else-if="item.subProdType == 53|| item.subProdType == 7" class="c-ph20 c-hh36 c-flex-row c-flex-center c-br20 c-fs20 c-fc-white c-bg-xblue"
                @click.stop="goRecommendDetail(item)">报名</div>
              <div v-else-if="item.subProdType == 1 || item.subProdType == 23" class="c-ph20 c-hh36 c-flex-row c-flex-center c-br20 c-fs20 c-fc-white c-bg-xblue"
                @click.stop="goRecommendDetail(item)">
                {{'购买' | iosPayText('51')}}
              </div>
              <div v-else-if="item.subProdType == 12 || item.subProdType == 13" class="c-ph20 c-hh36 c-flex-row c-flex-center c-br20 c-fs20 c-fc-white c-bg-xblue"
                @click.stop="goRecommendDetail(item)">
                <span v-if="item.payType == 2 || item.payType == 4">购买</span>
                <span v-else>查看</span>
              </div>
              <div v-else class="c-ph20 c-hh36 c-flex-row c-flex-center c-br20 c-fs20 c-fc-white c-bg-xblue" @click.stop="goRecommendDetail(item)">
                <span v-if="item.payType == 2 || item.payType == 4">{{'购买' | iosPayText('51')}}</span>
                <span v-else>查看</span>
              </div>
            </div>
          </div>
        </div>
      </section>
      <loading-status-tem :noData="recommendList.length == 0" :noDataText="'暂无好货'"></loading-status-tem>
    </div>

  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import VipCustomImg from "@/components/templates/common/VipCustomImg.vue";
export default {
  components: {
    loadingStatusTem,
    VipCustomImg
  },
  inject: ['goRecommendBuy'],
  props: {
    socialRoomId: {
      type: String,
      default: ''
    },
    showModal: {
      type: Boolean,
      default: false
    },
    recommendList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    isUseInject: {
      type: Boolean,
      default: false
    },
    isFromLive: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      cfrom: global.ckFrom,
      mapType: global.prodMapType,
      courseTypeMap: global.prodCourseType,
      relationTypeMap: global.relationTypeMap,
    };
  },
  watch: {
  },
  methods: {
    timeChat(timeType) {
      let nowtime = new Date().getTime();
      let couponTime = new Date(timeType.replace(/-/g, '/')).getTime();
      if (nowtime >= couponTime) {
        return true
      }
    },
    goDetail(item) {
      if (this.goRecommendBuy) {
        //依赖注入存在(优惠卷不跳转详情)
        if (item.subProdType == 92) return;
        item.isShowDesc = true;
        this.goRecommendBuy(item);
      } else {
         this.$emit('goDetail', item);
      }
    },
    getCouponcou(item) {
      if (this.isUseInject) {
        //调用依赖注入
        console.log("调用依赖注入")
        item.isShowDesc = false;
        this.goRecommendBuy(item);
      } else {
        this.$emit("getCoupon", item.relationId)
      }

    },
    //查看好物推荐详情
    goRecommendDetail(item) {
       if (this.isUseInject) {
        //调用依赖注入
        console.log("调用依赖注入")
        item.isShowDesc = false;
        this.goRecommendBuy(item);
        return;
       }
      if (item.relationType == this.relationTypeMap.collage && (item.status >= 3 || this.timeChat(item.endTime))) {
        this.$showCjToast({
          text: "活动已结束",
          type: "warn",
          time: 1500
        });
        return;
      }
      console.log(item)
      if (item.subContent * 1 > 0 && item.subProdType * 1 != global.ckFrom.reservation && item.relationType != this.relationTypeMap.collage && item.subProdType * 1 != global.ckFrom.activity && item.subProdType * 1 != global.ckFrom.camp && item.subProdType * 1 != 76 && item.subProdType * 1 != global.ckFrom.booking && item.subProdType * 1 != global.ckFrom.shopping && item.subProdType * 1 != global.ckFrom.mall) {
        let data = {
          cId: '',
          ckFrom: '',
          extId: ''
        }
        console.log(data, item)
        if (item.subProdType * 1 == global.ckFrom.course) {
          data.cId = item.subMsgId
          data.extId = -1
          data.ckFrom = item.subProdType
        } else if (item.subProdType * 1 == global.ckFrom.camp) {
          data.cId = -1
          data.extId = item.subProdId
          data.ckFrom = item.subProdType
        } else {
          data.cId = -1
          data.extId = item.subMsgId
          data.ckFrom = item.subProdType
        }
        this.$emit("buyInfo", data, item)
      } else {
        let prodItem = JSON.parse(JSON.stringify(item));
        prodItem.subProdType = prodItem.subProdType || prodItem.prodType;
        let isLive = (prodItem.subContent * 1 > 0 || prodItem.subProdType == global.ckFrom.activity || prodItem.subProdType == global.ckFrom.shopping || prodItem.subProdType == global.ckFrom.mall) ? 1 : 0;
        this.$emit('goDetail', prodItem, isLive);
      }
    },

    closeModal(e) {
      this.$emit("closeRecommendModal");
    }
  },
  activated() {
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.my-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1002;
  width: 100%;
  height: 100%;
  padding-top: 3rem;
}

.bg-masker {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.my-content {
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: 100%;
  border-radius: 0.75rem 0.75rem 0 0;
  background-color: #F5F7FA;
}
.my-content.no-data{
  height: 17rem;
}
.text-decoration {
  text-decoration: line-through;
}
.coupon-left {
  background: url("../../../../public/i/wap/coupon/di.png") no-repeat 100%;
  background-size: 100% 100%;
}
.exchange-left {
  background: url("../../../../public/i/wap/coupon/exchangenew.png") no-repeat 100%;
  background-size: 100% 100%;
}
.exchange-couponGray {
  background: url("../../../../public/i/wap/coupon/coupon_gray.png") no-repeat 100%;
  background-size: 100% 100%;
}
.all-coupon-bg {
  background-color: #f4f7f9;
}
.bg-flashSales {
  display: inline-block;
  font-size: 0.4rem;
  padding: 0rem 0.25rem;
  margin-right: 0.25rem;
  color: #fff;
  background: linear-gradient(
    to right,
    rgba(255, 83, 85, 1) 0%,
    rgba(255, 83, 85, 0.7) 100%
  );
  border-radius:0 .15rem 0.15rem 0.15rem;
}
</style>
